<template>
  <div class="rangk_list">
    <!-- 描述 -->
    <div class="header">
      <div class="poster">
        <ltAvatar :src="list.coverImgUrl" size="150"></ltAvatar>
      </div>

      <div class="right_info">
        <h3 class="name">{{ list.name }}</h3>
        <p class="desc">{{ list.description }}</p>

        <div class="btn">
          <ltButton class="play_all_btn" type="danger">
            <span class="iconfont icon-kaishi1"></span>
            <span>播放全部</span>
          </ltButton>
        </div>
      </div>
    </div>

    <!-- 歌单歌曲列表 -->
    <div class="play_song_list">
      <div class="play_song_list_header">
        <span class="index">序号</span>
        <span class="title">标题</span>
        <span class="singer_name">专辑</span>
        <span class="singer">歌手</span>
        <span class="options">操作</span>
      </div>
      <div class="play_song_list_body">
        <div
          v-for="(item, index) in list.tracks"
          :key="item.id"
          class="play_song_list_item"
          @click="playSongHandler(item)"
        >
          <span class="index">{{ padZero(index + 1, 2) }}</span>
          <div class="title">
            <ltAvatar :src="item.al.picUrl" size="50"></ltAvatar>
            <div class="song_info">
              <span>{{ item.name }}</span>
            </div>
          </div>
          <span class="singer_name">{{ item.al.name }}</span>
          <span class="singer">{{ item.ar[0].name }}</span>

          <span class="options">
            <span class="iconfont icon-kaishi1"></span>
            <span class="iconfont icon-aixin"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import ltAvatar from '@renderer/base-ui/lt-avatar/index.vue'
import ltButton from '@renderer/base-ui/lt-button/index.vue'

import { padZero } from '@renderer/utils/format'

import { useRoute } from 'vue-router'
import useRecommed from '@renderer/pinia/modules/recommed'
import usePlay from '@renderer/pinia/modules/play'

const recommedStore = useRecommed()
const route = useRoute()
const playStore = usePlay()

const list = ref<any>({})

const id = (route.query.id as any as number) * 1

onMounted(() => {
  list.value = recommedStore.rankingList.find((item) => item.id === id)
})

// 点击播放音乐
const playSongHandler = (item: any) => {
  console.log(item)
  playStore.setCurrentAudio2(item)
  playStore.setPlayList2(item)
}
</script>

<style scoped lang="scss">
.rangk_list {
  padding: 20px;
  .header {
    display: flex;
    .poster {
      width: 200px;
      height: 200px;
      position: relative;
      margin-right: 15px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .right_info {
      flex: 1;

      .name {
        font-weight: 700;
      }
      .desc {
        color: #f6f6f6;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;

        &:hover {
          background-color: var(--ev-main-bgc);
        }
      }

      .btn {
        margin-top: 10px;
        .play_all_btn {
          display: flex;
          cursor: pointer;
          .iconfont {
            margin-right: 5px;
          }
        }
      }
    }
  }

  .play_song_list {
    margin-top: 20px;
    .play_song_list_header {
      display: flex;
      .index {
        flex: 0.6;
      }
      .title {
        flex: 3;
      }
      .singer_name {
        flex: 2;
      }
      .singer {
        flex: 1;
      }
      .options {
        flex: 1;
      }
    }

    .play_song_list_body {
      .play_song_list_item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        cursor: pointer;
        .index {
          flex: 0.6;
        }
        .title {
          flex: 3;
          display: flex;
          align-items: center;
          .song_info {
            display: flex;
            span {
              margin-left: 10px;
            }
          }
        }
        .singer_name {
          flex: 2;
        }
        .singer {
          flex: 1;
        }
        .options {
          flex: 1;
          display: flex;
          span {
            margin-right: 8px;
          }
        }
        &:hover {
          background-color: var(--ev-main-bgc);
        }
      }
    }
  }
}
</style>
